import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';

import { OlState } from '../../../ngx-ol/store/reducers';
import { viewSelector } from '../../../ngx-ol/store/selectors/view.selector';
import { ViewModel } from '../../../ngx-ol/models';

import { MapState } from '../../store/reducers';
import { ZoomDecrement, ZoomIncrement } from '../../store/actions/zoom.action';

@Component({
  selector: 'ege-map-zoom',
  templateUrl: './zoom.component.html',
  styleUrls: ['./zoom.component.scss']
})
export class ZoomComponent implements OnInit {

  disabledIn: boolean;
  disabledOut: boolean;

  constructor(
    private olStore: Store<OlState>,
    private mapState: Store<MapState>
  ) { }

  ngOnInit() {
    this.olStore.select(viewSelector.getViewEntities).subscribe((data: ViewModel) => {
      this.disabledIn = data.disabledZoomIn;
      this.disabledOut = data.disabledZoomOut;
    });
  }

  onZoomIn(): void {
    if(!this.disabledIn) {
      this.mapState.dispatch(new ZoomIncrement());
    }
  }

  onZoomOut(): void {
    if(!this.disabledOut) {
      this.mapState.dispatch(new ZoomDecrement());
    }
  }

}
